<template>
  <div class="withdraw">
    <div class="tip-box">请输入提现密码,完成身份验证</div>

    <div class="pwd-box">
      <ul class="mm_box" @click="openKeyBoard">
        <li class="num" v-for="(i,index) in items" :key="index" :class="password[i]?'mmdd':''"></li>
      </ul>
    </div>
    <router-link to="/authcode">
      <div class="mobile-code">通过短信验证码方式完成身份验证</div>
    </router-link>

    <div class="numb_box" v-if="showBoard">
      <div class="xiaq_tb">
        <img src="./pull.jpg" class="pull" @click="closeKeyBoard" onclick="return false">
      </div>
      <ul class="nub_ggg">
        <li @click="keyUpHandle($event)" v-for="val in keys" v-if="val!='清空'">
          <a href="javascript:void(0);">{{ val }}</a>
        </li>
        <li v-else @click="clearPwdHandle">
          <a href="javascript:void(0);">清空</a>
        </li>
        <li @click="delHandle">
          <a href="javascript:void(0);">删除</a>
        </li>
      </ul>
    </div>
    <v-dialog v-model="sendVal" :content="content" sureText="重试" type="default" @sure="retry"></v-dialog>
    <v-dialog v-model="modalVal" :content="modal" type="default" @sure="sure"></v-dialog>
  </div>
</template>

<script>
  const keys = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, "清空", 0]
  import Cookies from 'js-cookie'
  import md5 from 'js-md5'
  import dialog from '../../components/dialog/dialog'
  import {baseUrl, salt} from "../../common/js/env"

  export default {
    data() {
      return {
        items: [0, 1, 2, 3, 4, 5],
        password: [],
        keys: keys(),
        showBoard: false,
        sendVal: false,
        modalVal: false,
        content: "",
        modal: ""
      }
    },
    methods: {
      keyUpHandle(e) {
        let text = e.currentTarget.innerText
        let len = this.password.length
        if (!text || len >= 6) return
        this.password.push(text)
        this.pwdUpdate();
      },
      delHandle() {//删除
        if (this.password.length <= 0)
          return false
        this.password.pop();
      },
      clearPwdHandle() {//清空
        this.password = [];
      },
      pwdUpdate() {//校验提现密码
        if (this.password.length >= 6) {
          let withPwd = this.password.join(' ').replace(/\s/g, '');
          //判断本地存储密码次数为3次并且cookie中存储的值为null时,就把本地存储的次数清除(cookie10分钟失效后要把本地存储的密码次数删除)
          if (localStorage.getItem("sess_time_local") == 3 && Cookies.get("sess_time_local") == null) {
            localStorage.removeItem("sess_time_local");
          }
          let sess_time = localStorage.getItem("sess_time_local"); //当前密码错误次数就等于本地存储的次数,牵扯到提现密码的页面都会记录并且每次叠加,直接赋值
          if (Cookies.get("sess_time_local") == 3) { //密码错误次数过多
            this.modalVal = true;
            this.modal = "提现密码错误次数过多,请十分钟后再试";
            return;
          } else {//提现密码校验
            this.$vux.loading.show({
              text: '加载中',
            })
            let base64 = require('js-base64').Base64;
            let userSign = base64.decode(sessionStorage.getItem("user_sign"));
            this.axios.get(baseUrl + "/userbank/update_drawpwd?sgin=" + userSign + "&oldPwd=" + md5(md5(withPwd) + salt) + "&type=1" + "&withdrawPwd=''").then((res) => {
              let resultObj = res.data;
              this.$vux.loading.hide();
              this.showBoard = false;
              this.password = [];
              if (resultObj.code == 0 && resultObj.data == 1) {
                this.$router.push("/withdraw_pwdupdate");
              } else {//身份验证失败,记录错误提现密码次数
                sess_time++;
                localStorage.setItem("sess_time_local", sess_time);
                if (sess_time == 3) { //错误次数达到3次
                  let date = new Date();
                  date.setTime(date.getTime() + 60 * 1000 * 10); //过期为10分钟
                  Cookies.set('sess_time_local', sess_time, {expires: date, path: ''});
                  this.modalVal = true;
                  this.modal = "提现密码错误次数过多,请十分钟后再试";
                } else { //密码错误次数提醒
                  this.sendVal = true;
                  this.content = "提现密码错误,请重试(还剩" + parseInt(3 - sess_time) + "次机会)"
                }
              }
            }).catch(() => {
              this.$vux.loading.hide();
              this.$vux.toast.text("网络异常", "middle");
            });
          }
        }
        return false
      },
      closeKeyBoard() {//关闭键盘
        this.showBoard = false;
      },
      openKeyBoard() {//开启键盘
        this.showBoard = true;
      },
      retry() {//重试
        this.sendVal = false;
        this.password = [];
        this.showBoard = true;
      },
      sure() {//跳转个人中心
        this.modalVal = false;
        this.showBoard = false;
        this.$router.push("/salary");
      },
    },
    components: {
      "v-dialog": dialog
    }
  }
</script>

<style lang="stylus" scoped>
  .withdraw
    width: 100%
    height: 100%
    background: rgba(255, 255, 255, 1)
    .tip-box
      display: flex
      justify-content: center
      align-items: center
      margin-bottom: 0.56rem
      width: 100%
      height: 1.853rem
      font-size: 0.44rem
      color: rgba(68, 68, 68, 1)
      border-bottom: 1px solid rgba(230, 230, 230, 1)
    .pwd-box
      margin: 0 auto
      width: 90%
      height: 1.333rem
      border: 1px solid #CCCCCC;
      .mm_box
        display: flex
        width: 100%
        height: 1.333rem
        list-style: none
        .num
          flex: 1
          border-right: 1px solid #EEEEEE;
          height: 1.333rem
          width: 16.35%
          &:last-child
            border-right: 0rem
        .mmdd
          display: inline-block
          background: #FFF url(./dark.jpg) center no-repeat
          background-size: 25%
    .mobile-code
      display: flex
      justify-content: center
      align-items: center
      margin-top: 0.547rem
      font-size: 0.333rem
      color: rgba(60, 175, 255, 1)
    .numb_box
      position: fixed
      background: #f5f5f5
      width: 100%
      bottom: 0rem
      height: auto
      .xiaq_tb
        width: 100%
        padding: 5px 0px
        text-align: center
        border-top: 1px solid #dadada
        margin: 0 auto
        display: table
        .pull
          width: 0.533333rem
          height: 0.333333rem
          margin-top: 0.183333rem
      .nub_ggg
        border: 1px solid #dadada
        overflow: hidden
        border-bottom: none
        width: 100%
        margin-top: 0.133333rem
        li
          width: 33.3333%
          border-bottom: 1px solid #dadada
          float: left
          text-align: center
          font-size: 0.426666rem
          a
            display: block
            color: #000
            height: 1.2rem
            line-height: 1.2rem
            overflow: hidden
            &:active
              background: #e0e0e0
            &:nth-child(1)
              border-left: 1px solid #dadada
              border-right: 1px solid #dadada
</style>
